<template>
          <div class="top" :style="{position:position,zIndex:zIndex}">
           
            <div class="Link">
                <div class="Search">
                    <img src="../../assets/icon/search.svg" alt="搜索" style="position: absolute;left: 95%;top: 15%; cursor: pointer;" @click="Tosearch">
                    <input type="text" id="search" placeholder="请输入内容" v-model="user.searchContent" @keydown.enter="Tosearch">
                </div>
                
                <div class="link">
                    <ul>   
                        <li style="position: absolute;left: 30px;"><a href="index.html">MSDN</a></li>
                        <li v-if="login === 'no'"><a href="javascript:;" id="login" @click="showPassport">登录/注册</a></li>
                        <li v-else-if="login === 'yes'" style="margin-left: 35px;" class="dropdown">
                              <!-- <img src="../../assets/icon/person-circle.svg" alt="头像" style="margin-top: 4px;cursor: pointer;transform: scale(1.3);" class="avatar"> 
                             --><el-avatar :size="22" :src="user.circleUrl" style="cursor: pointer;" class="avatar"></el-avatar>
                              <div class="persondropdown">
                                <div class="nickname" style="width: 100%;height: 40px;  margin-top: 20px;line-height: 40px;padding-left: 70px;">
                                    <h4>{{user.nickname}}</h4>                                  
                                </div>
                                <div class="detail" style="width: 100%;height: 60px;margin-top: 20px;">
                                
                                  <div class="detail-number">
                                    <div class="A" >
                                          <h2 style="margin-left: 5px;">0</h2>
                                         <p>粉丝</p>                                         
                                    </div>
                                    <div class="A" >
                                          <h2 style="margin-left: 5px;">0</h2>
                                         <p>关注</p>                                         
                                    </div>
                                    <div class="A" >
                                          <h2 style="margin-left: 5px;">0</h2>
                                         <p>获赞</p>                                         
                                    </div>
                                  </div>
                                </div>

                                <div class="person-list" style="width: 200px;height: 140px;margin-left: 20px;">
                                      <ul >
                                        <li >
                                            <a href="userCenter.html">
                                               <img src="../../assets/icon/person.svg" alt="个人中心" style="transform: scale(1.8);position: relative;left: 5px;">  
                                               <span style="margin-left: 20px;">个人中心</span>
                                            </a>
                                        </li>
                                        <li >
                                            <a href="javascript:;">
                                               <img src="../../assets/icon/box-arrow-right.svg" alt="个人中心" style="transform: scale(1.8); position: relative;left: 8px;">  
                                                <span style="margin-left: 20px;" @click="logOut">退出</span>
                                            </a>
                                        </li>
                                     
                                    </ul>
                                </div>
                                 
                              </div>              
                        </li>
                        <li><a href="javascript:;">足迹</a></li>
                        <li><a href="javascript:;">消息</a></li>
                        <li><a :href="path.creationCenter">创作中心</a></li>
                        <li><a :href="path.publish" target="_blank" class="publish">发布</a></li>
                    </ul>
                </div>
            </div>
        </div>
</template>

<script>

export default {
      name:"Top",
      data() {
        return {
            user:{
                nickname:localStorage.getItem("nickname"),
                circleUrl:localStorage.getItem("avatar"),
                searchContent:""
            },
          path:{
            creationCenter:"",
            publish:""
          },

           
            position:"",
            zIndex:"",
            url:"www",
            //v-if
            login:"no"
        }
      },
      methods: {
        showPassport(){
             this.position="absolute";
             this.zIndex="1";
             this.$store.commit("SHOW",true)
             setTimeout(()=>{
                document.addEventListener('click',this.add,false)
                
             },300)      
        },
        add(e){
                let value=e.target.className
                if(value==""){
                    this.$store.commit("SHOW",false) 
                    document.removeEventListener('click',this.add)
                }
               
        },
        logOut(){
            localStorage.removeItem('token');
            localStorage.removeItem('nickname');
            localStorage.removeItem('avatar');
            setTimeout(()=>{
              window.location.href="login.html";
            },1000)

         },
        Tosearch(){
          this.$store.commit('SEARCH',this.user.searchContent);
          window.open('search.html?searchContent='+this.user.searchContent);



        }

     
      },
      mounted(){
        const token = localStorage.getItem('token');
        if(token!==null){
            this.login="yes"
          this.path.creationCenter="creationCenter.html"
          this.path.publish="publish.html"
        }else{
          this.path.creationCenter="login.html"
          this.path.publish="login.html"


        }
      }
}
</script>

<style>
.top{
height: 45px;
width: 100%;
 min-width: 1513px;
  max-width: 1513px;
position: sticky;
top: 0;
z-index: 1;
background-color: white;
}

.top .Link{
height: 30px;
width:fit-content;
text-shadow: 1px 1px;
Font-style:oblique;
float:right;
margin-right: 50px;
white-space:nowrap;
}
.top .Link .link{
margin-top: 8px;
float:left;
white-space:nowrap;
margin-right: 0px;
}

.top .Link .link ul{
margin-top: 5px;
list-style-type: none;
float: right;
}

.top .Link .link ul li{
margin-left: 20px;
float:left
}

.top .Link .link ul li a{
font-size: 10px;
/* font-weight: bolder; */
color:black;
text-decoration: none;
margin-left: 10px;
}
a:hover{
    opacity: 1;
}
.persondropdown{
    display: none;
    position: absolute;
    width: 240px;
    height: 300px;
    right: 280px;
    background-color: white;
    border-radius:2ch ;
    border:1px solid greenyellow ;
    top:35px;
  z-index: 5;
}
.avatar:hover+.persondropdown{
    display: block;
}
.persondropdown:hover{
    display: block;
}
.detail .detail-number{
    display: flex;
    justify-content: space-around;
}

.detail .detail-number .A{
   width: 60px;
   height: 60px;
   padding-left: 15px;
   margin-left: 10px;
   float: left;
}
.person-list ul li a{
    display: block;
    /* background-color: rgb(19, 40, 94); */
    width: 200px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border-bottom: 1px solid black;
    
   

}
.publish{
border: 1px solid greenyellow;
padding-bottom: 10px;
border-radius: 2.5ch;
background-color: greenyellow;
color: white;
display: block;
width: 60px;
height: 10px;
text-align: center;
line-height: 20px;
}


.Link .Search{
width:fit-content;
display: inline;
margin:  auto;
position: absolute;
top: 15%;
right: 0;
left: 0;


}
.Link .Search #search{
width: 400px;
height: 30px;
line-height: 30px;
 border-radius: 1.5ch;
border: none;
display: inline;
padding-left: 10px;
border-bottom: 0.5px solid rgb(111, 183, 99);

}
.Link .Search #search:focus{
outline: none;

}

</style>